<template>
  <div class="jax-desc-item" :class="className">
    <div class="jax-desc-item__label" :style="{ width: _labelWidth }">
      {{ label }}
    </div>
    <div class="jax-desc-item__content">
      <slot>
        {{ value }}
      </slot>
    </div>
  </div>
</template>

<script setup>
const jaxDesc = inject('jax-desc')

const props = defineProps({
  label: String,
  value: String,
  itemWidth: String, // 组件宽度
  labelWidth: String, // 标签宽度
  labelPosition: String,
})

const className = computed(() => {
  const labelPosition = props.labelPosition || jaxDesc.labelPosition

  return {
    'jax-desc-item--left': labelPosition == 'left',
    'jax-desc-item--top': labelPosition == 'top',
  }
})

const _itemWidth = computed(() => {
  return props.itemWidth || jaxDesc.columnWidth
})

const _labelWidth = computed(() => {
  return props.labelWidth || jaxDesc.labelWidth || '100px'
})
</script>

<style lang="scss" scoped>
.jax-desc-item {
  display: flex;
  align-items: baseline;
}

.jax-desc-item--top {
  flex-direction: column;
  .jax-desc-item__label {
    margin-bottom: 12px;
  }
}

.jax-desc-item--left {
  .jax-desc-item__label {
  }
}

.jax-desc-item__label {
  width: 100px;
  color: #999;
  // text-align: right;
  margin-right: 12px;
}

.jax-desc-item__content {
  overflow: hidden;
  flex: 1;
  white-space: pre;
}
</style>
